<template>
    <div class="muandbady">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <div v-for="item in popList" :key="item.itemid" class="bodyimg">
                <img :src="item.image_url_set.main['800']" alt="">
                <div class="info">
                    <div class="info-title-time">
                          <h4>{{item.title}}</h4>
                        <p>仅剩<span class="time">{{(item.end_time - item.start_time) | getTimes }}</span></p>
                    </div>
                    <div class="brand-img">
                        <img :src="item.image_url_set.brand['320']" alt="">
                    </div>
                </div>
                <div class="discount">
                    <p>{{item.discount_string}}</p>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
export default {
    data () {
        return {
            popList: [],
            page: 1,
            finished: false,
            loading: false,
        }
    },
    methods:{
        getPopList () {
            this.axios({
                url: `/api5/ajaxGetList?page=${this.page}&item_per_page=20`,
                method: 'get'
            }).then(res=>{
                console.log(res.data.item_list);
                // this.popList = res.data.item_list
                if ( res.data.has_more !== '1') {
                    this.popList.push(...res.data.item_list) // 把数组添加进去
                    this.finished = false
                    this.loading = false
                    if(this.page===8){
                        this.finished = true // 停止触发
                        this.loading = true // 加载完成
                    }
                }else {
                    console.log('异步请求数据有误')
                }
            })
        },
        onLoad () {
            console.log('更新');
            this.page++
            this.getPopList()
            // this.finished = true // 停止触发
            // this.loading = true // 加载完成
            if(this.page===9){
                this.finished = true // 停止触发
                this.loading = true // 加载完成
            }
        },
    },
    mounted () {
        this.getPopList()
    },
    components: {
    }
}
</script>
<style lang="scss" scoped>
.muandbady{
    .bodyimg{
        width: 100%;
        position: relative;
        // z-index: 9;
        img{
            width: 100%;
            // height: 187.5px;
        }
        .info{
            width: 100%;
            height: 65px;
            background-color: #fff;
            .info-title-time{
                margin-left: 20px;
                margin-top: 10px;
                float: left;
                h4{
                    color: #333;
                    font-size: 14px;
                    font-weight: 400;
                    margin-bottom: 8px;
                }
                p{
                    color: #999;
                    vertical-align: middle;
                    font-size: 12px;
                }
            }
            .brand-img{
                width: 20%;
                float: right;
                margin: 16px 20px 0 0;
                img{
                    width: 100%;
                }
            }
        }
        .discount{
            position: absolute;
            top: 150px;
            background-color:rgba($color: #000000, $alpha: .8);
            color: #fff;
            padding: 2px 5px;
        }
    }
}
</style>
